<template>
    <div>
        <el-form @submit.native.prevent ref="editForm" :model="formFileds">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索名称或职位">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="get()">查询 </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add()">增加 </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="enable()">启用 </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="disable()">禁用 </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="deleteSelection">批量删除
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%;margin-bottom: 5=1px;" border highlight-current-row
            :default-sort="{ prop: 'date', order: 'descending' }" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection"> </el-table-column>
            <el-table-column property="companyName" label="所属公司"> </el-table-column>
            <el-table-column property="phone" label="联系电话"> </el-table-column>
            <el-table-column property="userName" label="姓名"> </el-table-column>
            <el-table-column property="role" label="职务"> </el-table-column>
            <el-table-column property="status" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
                        @change="statusChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column property="createTime" label="创建时间"> </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                        @click="rowEdit(scope.$index, scope.row)"></el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="pageSize" :current-page="pageNum" :total="total"
            @current-change="currentChange" @size-change="sizeChange" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 增加-弹出层 -->
        <UserManagementAdd ref="userManagementAddRef" v-if="addShow" :addShow="addShow" @dialogClose="dialogClose">
        </UserManagementAdd>
        <UserManagementEdit ref="usernManagementEditRef" v-if="editShow" :editShow="editShow" @dialogClose="dialogClose"
            :record="formFileds"></UserManagementEdit>
    </div>
</template>

<script>
import UserManagementAdd from "./userManageAdd.vue"
import UserManagementEdit from "./userManageEdit.vue"
import {
    listUser,
    updateUser,
    deleteUser,
    deleteBatchUser,
    updateBatchUser
} from '@/api/user/userManage';
export default {
    name: "Table",
    components: {
        UserManagementAdd,
        UserManagementEdit,
    },
    data() {
        return {
            input: "",
            pageSize: 10,
            pageNum: 1,
            total: 0,
            formFileds: {},
            tableData: [],
            isShowAddDialog: false,
            isShowEditDialog: false,
            multipleSelection: null,
            addShow: false,
            editShow: false,
        }
    },
    methods: {
        handleRowClick(row, event, column) {
            // 仅选中当前行
            this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone(selection) {
            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        rowEdit(index, row) {
            // //当前选中行
            this.formFileds = row;
            this.editShow = true;
        },
        dialogClose() {
            this.addShow = false;
            this.editShow = false;
            this.get();
        },
        add() {
            this.addShow = true;
        },
        Edit() {
            this.isShowEditDialog = true;
        },
        handleEdit(id) {
            this.$refs.editForm.validate(isValid => {

                if (!isValid) return;

                // 保存编辑后的数据
                Object.assign(this.tableData[id], this.formFileds);
                this.isShowEditDialog = false;

                // 考虑到可能编辑了日期-需要重新排序
                // ***注意：手动排序传参和表格的default-sort属性格式不太一样
                this.$refs.list.sort('date', 'descending');

                this.$message.success('编辑成功');
            });
        },
        get() {
            var par;
            par = {
                input: this.input,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            };

            listUser(par).then((res) => {
                if (res) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].status == 0) {
                            this.tableData[i].status = true;
                        } else {
                            this.tableData[i].status = false;
                        }
                    }
                    for (let i = 0; i < this.tableData.length; i++) {
                        let newdate = this.tableData[i].createTime;
                        this.tableData[i].createTime = newdate.substring(0, 10);
                    }
                }
            });
        },
        currentChange(e) {
            this.pageNum = e;
            this.get();
        },
        sizeChange(e) {
            this.pageSize = e;
            this.get();
        },
        rowDel(id) {
            // 让当前删除按钮失焦
            // event.target.blur();

            this.$confirm("确定要删除该用户吗？", "删除", {
                comfirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(() => {
                deleteUser("id=" + id).then((res) => {
                    if (res) {
                        this.$message.success("删除成功");
                        this.get();
                    }
                });
            });
        },
        //批量删除
        deleteSelection() {
            if (this.multipleSelection == "") {
                this.$message.warning("请至少选择一条数据进行删除！");
            } else {
                this.$confirm("数据将会永久删除，是否继续？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true,
                }).then(() => {
                    //生命空数组，这里的数组是后端需要的数据
                    let array = [];
                    //遍历勾选数据取自己需要的id等 这里是和后端需要的参数对应
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        // let obj = []; 这里的对象数据是需要删除的数据 这里声明为了不重复
                        let obj = this.multipleSelection[i].id;
                        array.push(obj); //把取出来的对象push到数组里
                    }
                    let obj = { id: array };
                    deleteBatchUser(obj).then((res) => {
                        //接口
                        this.get(); //删除完成后初始化查询列表
                    });
                });
            }
        },
        // 选中当前行-当前行的复选框被勾选
        // setCurRowChecked(row) {

        //     this.$refs.list.clearSelection();
        //     this.$refs.list.toggleRowSelection(row);
        // },
        enable() {
            if (this.multipleSelection == "") {
                this.$message.warning("请至少选择一条数据进行编辑！");
            } else {
                let array = [];
                let array1 = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let obj = this.multipleSelection[i].id;
                    let obj1 = this.multipleSelection[i].status;
                    obj1 = 0;
                    array.push(obj);
                    array1.push(obj1);
                }
                let obj = { id: array, status: array1 };
                updateBatchUser(obj).then((res) => {
                    this.get();
                });
            }
        },
        disable() {
            if (this.multipleSelection == "") {
                this.$message.warning("请至少选择一条数据进行编辑！");
            } else {
                let array = [];
                let array1 = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let obj = this.multipleSelection[i].id;
                    let obj1 = this.multipleSelection[i].status;
                    obj1 = 1;
                    array.push(obj);
                    array1.push(obj1);
                }
                let obj = { id: array, status: array1 };
                updateBatchUser(obj).then((res) => {
                    this.get();
                });
            }
        },
        statusChange(row) {
            let obj = Object.assign({}, row);
            if (obj.status == true) {
                obj.status = 0;
            } else {
                obj.status = 1;
            }
            this.$delete(obj, "createTime");
            updateUser(obj).then((res) => {
                this.get();
            });
        },
    },

    mounted() {
        this.get()
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
